
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>手风琴2223</title>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/xxui.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.xxui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/xxui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    
    <script type="text/javascript">
        var XXUIStyleCode = 'blue';
    </script>
</head>
<body>
    <h2>手风琴</h2>
    <h3>说明:</h3>
    <span>折叠面板（Accordion）俗称手风琴，其包含一系列的面板（panel）。 所有面板（panel）的头部（header）都是可见的，但是一次仅仅显示一个面板（panel）的 body 内容。 当用户点击面板（panel）的头部（header）时，该面板（panel）的 body 内容将可见，同时其他面板（panel）的 body 内容将隐藏不可见。</span>
    <h3>如：</h3>
    <div class="demo-exp-code entry-content"> 
        <div class="xxui-accordion" style="width:200px;height:450px;float:left;"
            data-options="border:false">   
            <div title="等待区" data-options="iconCls:'icon-w-update'" style="overflow:auto;padding:10px;background-color:#F2F2F2;">   
                <h3 style="color:#0099FF;">Accordion for jQuery</h3>   
                <p>Accordion is a part of easyui framework for jQuery.     
                It lets you define your accordion component on web page more easily.</p>   
            </div>   
            <div title="住院区" data-options="iconCls:'icon-w-download',selected:true" style="padding:10px;background-color:#F2F2F2;">   
                content2    
            </div>   
            <div title="出院区" data-options="iconCls:'icon-w-upload'" style="background-color:#F2F2F2;">   
                content3    
            </div>   
        </div>
        <div style="height:300px;width:20px;float:left"></div>

        <div class="xxui-accordion accordion-gray" style="width:200px;height:450px;float:left;"
            data-options="border:false">   
            <div title="等待区" data-options="iconCls:'icon-paper'" style="overflow:auto;padding:10px;">   
               content1
            </div>   
            <div title="住院区" data-options="iconCls:'icon-bed',selected:true" style="padding:10px;">   
                <code>class="xxui-accordion accordion-gray"</code>
            </div>   
            <div title="出院区" data-options="iconCls:'icon-change-loc'" style="padding:10px">   
                content3    
            </div>   
        </div>
        <div style="height:300px;width:20px;float:left"></div>

        <div  id="acc" class="xxui-accordion accordion-green" style="width:200px;height:450px;float:left;"
            data-options="border:false">   
            <div title="等待区" data-options="iconCls:'icon-w-update'" style="overflow:auto;padding:10px;">   
                <h3 style="color:#0099FF;">Accordion for jQuery</h3>   
                <p>Accordion is a part of easyui framework for jQuery.     
                It lets you define your accordion component on web page more easily.</p>   
            </div>   
            <div title="住院区" data-options="iconCls:'icon-w-download',selected:true" style="padding:10px;">   
                此手风琴可以进行增加和删除操作     
            </div>   
            <div title="出院区" data-options="iconCls:'icon-w-upload'">   
                content3    
            </div>   
        </div>
        <div style="height:300px;width:20px;float:left"></div>
        <div style="height:300px;width:120px;float:left">
            <a id="addBtn" href="#" >增加</a>
        </div>
        <div style="height:300px;width:120px;float:left">
            <a id="removeBtn" href="#" class="xxui-linkbutton">删除当前</a>
        </div>
        <div style="padding:2px ;clear: left"></div>
        <pre class="prettyprint hide lang-html"><code>&lt;!--蓝色手风琴-->
&lt;div class="xxui-accordion" style="width:200px;height:450px;float:left;" data-options="border:false">  
    &lt;div title="等待区" data-options="iconCls:'icon-w-update'" style="overflow:auto;padding:10px;background-color:#EBEBEB;">   
        &lt;h3 style="color:#0099FF;">Accordion for jQuery&lt;/h3>   
        &lt;p>Accordion is a part of easyui framework for jQuery.     
        It lets you define your accordion component on web page more easily.&lt;/p>   
    &lt;/div>   
    &lt;div title="住院区" data-options="iconCls:'icon-w-import',selected:true" style="padding:10px;background-color:#EBEBEB;">   
        content2    
    &lt;/div>   
    &lt;div title="出院区" data-options="iconCls:'icon-w-export" style="background-color:#EBEBEB;">   
        content3    
    &lt;/div>   
&lt;/div>
&lt;!--灰色手风琴-->
&lt;div class="xxui-accordion accordion-gray" style="width:200px;height:450px;float:left;"
    data-options="border:false">   
    &lt;div title="等待区" data-options="iconCls:'icon-paper'" style="overflow:auto;padding:10px;border: 1px #ccc solid;">   
        content1
    &lt;/div>   
    &lt;div title="住院区" data-options="iconCls:'icon-bed',selected:true" style="padding:10px;border: 1px #ccc solid;">   
        &lt;code>class="xxui-accordion accordion-gray"&lt;/code>
        &lt;code>border:1px #cccccc solid;&lt;/code>
    &lt;/div>   
    &lt;div title="出院区" data-options="iconCls:'icon-change-loc'" style="padding:10px;border: 1px #ccc solid;">   
        content3    
    &lt;/div>   
&lt;/div>
&lt;!--绿色手风琴-->
&lt;div id="acc" class="xxui-accordion accordion-green" style="width:200px;height:450px;float:left;" data-options="border:false">   
    &lt;div title="等待区" data-options="iconCls:'icon-w-update'" style="overflow:auto;padding:10px;">   
        &lt;h3 style="color:#0099FF;">Accordion for jQuery&lt;/h3>   
        &lt;p>Accordion is a part of easyui framework for jQuery.     
        It lets you define your accordion component on web page more easily.&lt;/p>   
    &lt;/div>   
    &lt;div title="住院区" data-options="iconCls:'icon-w-import',selected:true" style="padding:10px;">   
        此手风琴可以进行增加和删除操作   
    &lt;/div>   
    &lt;div title="出院区" data-options="iconCls:'icon-w-export">   
        content3    
    &lt;/div>   
&lt;/div>  
&lt;div style="height:300px;width:120px;float:left">
     &lt;a id="addBtn" href="#" >增加&lt;/a>
&lt;/div>
&lt;div style="height:300px;width:120px;float:left">
     &lt;a id="removeBtn" href="#" class="xxui-linkbutton">删除当前&lt;/a>
&lt;/div&gt;
</code></pre>
        <pre class="prettyprint hide lang-js">
&lt;script type="text/javascript">
    $(function(){
        var accObj = $XUI.accordion("#acc");
        $XUI.linkbutton("#addBtn",{
            onClick:function(){
                accObj.add({
                    title:'新标题',
                    iconCls:'icon-w-add',
                    content:'你点击按钮了，我就有了。',
                    selected:true //,
                    //style:{backgroundColor:'red',borderWidth:2}
                });
            }
        });
        $XUI.linkbutton("#removeBtn",{
            onClick:function(){
                // 删除当前选中的
                var p = accObj.getSelected();
                if (p){
                    var index = accObj.getPanelIndex(p);
                    accObj.remove(index);
                }
            }
        })
    });
&lt;/script>             
        </pre>
    </div>
    <prettyprint/>
	<script type="text/javascript">
    $(function(){
        var accObj = $XUI.accordion("#acc");
        $XUI.linkbutton("#addBtn",{
            onClick:function(){
                accObj.add({
                    title:'新标题',
                    iconCls:'icon-w-add',
                    content:'你点击按钮了，我就有了。',
                    selected:true //,
                    //style:{backgroundColor:'red',borderWidth:2}
                });
            }
        });
        $XUI.linkbutton("#removeBtn",{
            onClick:function(){
                // 删除当前选中的
                var p = accObj.getSelected();
                if (p){
                    var index = accObj.getPanelIndex(p);
                    accObj.remove(index);
                }
            }
        })
    });
  </script>	
</body>
</html>